<template>
  <div class="mui-pages record-member-lists">
    <header class="mui-bar mui-bar-nav">
      <div class="header-common-title flex-justify-start">
        <div @click="fn.back()" class="mui-action-back"><img class="back-btn" src="../../../../static/images/back.png"></div>
        <div class="header-search flex-center">添加申请补开</div>
        <div @click="sumit" class="header-right-btn flex-center">确定</div>
      </div>
    </header>
    <div id="scroll1" class="mui-scroll-wrapper">
      <div class="mui-scroll">
        <ul class="mui-table-view meeting-editor-lists">
          <li class="mui-table-view-cell flex-between-center" id="typeSelect">
            <b>周度学习主题：</b>
            <span class="mine-lists-content">{{studyRepairApply.subject}}</span>
          </li>
          <li class="mui-table-view-cell flex-between-center" id="rangeSelect">
            <b>原学习时间：</b>
            <span class="mine-lists-content">{{formateTime(studyRepairApply.studyBeginTime)}}-{{formateTime(studyRepairApply.studyEndTime)}}</span>
          </li>
          <li class="mui-table-view-cell flex-between-center">
            <b>申请支部：</b>
            <span class="mine-lists-content">{{userInfo.partyMemberModel.partyGroupName}}</span>
          </li>
          <li class="mui-table-view-cell flex-between-center">
            <b>申请人：</b>
            <span class="mine-lists-content">{{userInfo.fullname}}</span>
          </li>
          <li @click="showTimePicker()" class="mui-table-view-cell flex-between-center">
            <b><span class="mine-lists-money">*</span>补开时间：</b>
            <span class="mine-lists-content" id="repairTime">
											<input class="setup-input" type="text" readonly v-model="repairTime " placeholder="请选择补开时间" /></span>
          </li>
          <li class="mui-table-view-cell">
            <b><span class="mine-lists-money">·</span>补开原因：</b>
            <textarea v-model="reasons" class="list-textarea" id="textarea" rows="5" placeholder="请填写补开原因"></textarea>
          </li>
          <li class="mui-table-view-cell">
            <b>备注：</b>
            <textarea v-model="remarks" class="list-textarea" id="textarea" rows="5" placeholder="请填写备注(非必填)"></textarea>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import tools from '@/utils/tools'
  import loginService from '@/service/loginService'
  import api from '@/common/config/api'
  import moment from 'moment'
  export default {
    name: 'repairApply',
    data () {
      return {
        fn: tools,
        result: {},
        attachmentList: [],
        studyRepairApply: {},
        userInfo: {},
        repairTime: '',
        submintRepairTime: '',
        reasons: '',
        remarks: ''
      }
    },
    created () {
      this.studyRepairApply = this.$store.state.studyRepairApply
      this.userInfo = this.$store.state.userInfo
      // this.loadData()
    },
    methods: {
      loadData () {
        let recordId = this.$route.params.recordId
        let data = {
          requestId: recordId
        }
        loginService.pactUpSubmit(data).then((res) => {
          if (res.code !== 200) {
            return tools.tip(res.message)
          }
          this.result = res.data
          if (res.data) {
            if (res.data.attachment && res.data.attachment !== '') {
              this.attachmentList = JSON.parse(res.data.attachment)
            }
          }
        })
      },
      formateTime (str) {
        moment.lang('zh-cn')
        return moment(str).format('MM月DD日')
      },
      getFilePath (arr) {
        arr.map((v) => {
          v.url = api.downLoadFile + v.fileId
          return v
        })
        return arr
      },
      isImage (fileName) {
        let arrExt = fileName.split('.')
        return 'PNG,JPG,JPEG,BMP,GIF'.split(',').indexOf(arrExt[arrExt.length - 1].toUpperCase()) > -1
      },
      showImagePreview (url) {
        if (url.length < 1) {
          return false
        }
        let imgs = [url]
        this.$createImagePreview({
          initialIndex: 0,
          imgs: imgs
        }, (h) => {
          return h('div', {
            class: {
              'image-preview-custom-header': false
            },
            slot: 'header'
          }, '')
        }).show()
      },
      downLoadFile (item) {
        console.log("item={}", item)
        if (window.android && window.android.downloadFile) {
          window.android.downloadFile(item.url, item.fileName)
        }
      },
      showTimePicker () {
        this.$createTimePicker({
          minuteStep: 1,
          delay: 1,
          min: parseInt(moment().subtract(10, 'days').format('x')),
          day: {
            len: 90,
            filter: ['今天', '明天'],
            format: 'M月d日'
          },
          onSelect: (selectedTime, selectedText, formatedTime) => {
            this.repairTime = moment(selectedTime).format('YYYY-MM-DD HH:mm:ss')
            this.submintRepairTime = moment(selectedTime).utc().format()
            console.log("submintRepairTime={}", this.submintRepairTime)
            this.$forceUpdate()
          }
        }).show().setTime(parseInt(moment().format('x')))
      },
      sumit () {
        if (this.submintRepairTime === '') {
          return tools.tip('请选择补开时间')
        }
        if (this.reasons === '') {
          return tools.tip('请填写补开原因')
        }
        let data = {
          beforeBeginTime: moment(this.studyRepairApply.studyBeginTime).utc().format(),
          beforeEndTime: moment(this.studyRepairApply.studyEndTime).utc().format(),
          createBy: this.userInfo.userId,
          partyGorupName: this.userInfo.partyMemberModel.partyGroupName,
          partyGroupId: this.userInfo.partyMemberModel.partyGroupId,
          patchupReason: this.reasons,
          patchupTime: this.submintRepairTime,
          remarks: this.remarks,
          subject: this.studyRepairApply.subject,
          weekId: this.studyRepairApply.id
        }
        loginService.pactUpSubmit(data).then((res) => {
          tools.tip(res.message)
          if (res.code === 200) {
            return this.fn.back()
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
